<script setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import useDragAndDrop from "./useDnD";
import { getProcessList } from "@/api/modules/process";

const { onDragStart } = useDragAndDrop();

// 工序列表
const processList = ref([]);
const loading = ref(false);
const searchKeyword = ref("");

// 过滤后的工序列表
const filteredProcessList = computed(() => {
  if (!searchKeyword.value.trim()) {
    return processList.value;
  }

  const keyword = searchKeyword.value.toLowerCase();
  return processList.value.filter(
    process => process.processCode.toLowerCase().includes(keyword) || process.processName.toLowerCase().includes(keyword)
  );
});

// 获取工序列表
const getProcessData = async () => {
  loading.value = true;
  try {
    // 获取所有可用的工序（状态为已分配或运行中的工序）
    const params = {
      current: 1,
      size: 200, // 增加获取数量
      status: "" // 不限制状态，获取所有工序
    };
    const res = await getProcessList(params);

    if (res.data && res.data.records) {
      processList.value = res.data.records;
    }
  } catch (error) {
    console.error("获取工序列表失败:", error);
    ElMessage.error("获取工序列表失败");
  } finally {
    loading.value = false;
  }
};

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = "";
};

// 页面加载时获取工序数据
onMounted(() => {
  getProcessData();
});
</script>

<template>
  <aside class="sidebar">
    <div class="sidebar-header">
      <div class="description">你可以把这些节点拖到工艺流程中</div>

      <!-- 搜索框 -->
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索工序编码或名称"
          :prefix-icon="Search"
          clearable
          size="small"
          @clear="clearSearch"
        />
      </div>
    </div>

    <div class="nodes-container" v-loading="loading">
      <div class="nodes">
        <!-- 开始节点 -->
        <!-- <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">开始</div> -->

        <!-- 工序节点 -->
        <div
          v-for="process in filteredProcessList"
          :key="process.id"
          class="vue-flow__node-default"
          :draggable="true"
          @dragstart="onDragStart($event, 'default', process)"
          :title="`工序编码: ${process.processCode}\n工序名称: ${process.processName}\n状态: ${process.status}`"
        >
          <div class="process-code">({{ process.processCode }})</div>
          <div class="process-name">{{ process.processName }}</div>
        </div>

        <!-- 无搜索结果提示 -->
        <div v-if="filteredProcessList.length === 0 && !loading" class="no-process">
          <div v-if="searchKeyword">未找到匹配的工序</div>
          <div v-else>暂无工序数据</div>
        </div>

        <!-- 结束节点 -->
        <!-- <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">结束</div> -->
      </div>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  background: white;
}

.description {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.search-container {
  margin-bottom: 0;
}

.nodes-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.nodes {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  padding-top: 8px;
}

/* 自定义滚动条样式 */
.nodes::-webkit-scrollbar {
  width: 6px;
}

.nodes::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.nodes::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.nodes::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.no-process {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin: 20px 0;
  padding: 20px;
}

.vue-flow__node-default {
  cursor: grab;
  transition: all 0.2s ease;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  user-select: none;
}

.vue-flow__node-default:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-color: #40a9ff;
}

.vue-flow__node-default:active {
  cursor: grabbing;
  transform: translateY(0);
}

.process-code {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.process-name {
  font-size: 13px;
  color: #333;
  margin-top: 2px;
  line-height: 1.3;
}

/* 搜索高亮效果 */
.vue-flow__node-default.highlight {
  border-color: #52c41a;
  background-color: #f6ffed;
}
</style>
